<style lang="less">
  #global-search {
    background: #3d3936 url(~@/assets/pcindex_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .searchList {
      background: #fff;
      position: relative;
      min-height: 620px;
      padding-top: 2em;
      .tab {
        width: 1190px;
        margin: 0 auto 2em auto;
        font-size: 140%;
        a {
          color: #999;
          display: inline-block;
          padding: 0.5em 1em;
          &.router-link-active {
            border-bottom: solid 3px #6495ED;
            color: #6495ED;
          }
        }
      }
      .content {
        width: 1190px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        &:after {
          content: "";
          width: 327px;
        }
      }
      .item {
        height: 325px;
        width: 327px;
        .link {
          display: block;
          position: relative;
          img {
            width: 100%;
            height: 220px;
            display: block;
            background: #fbf8a8;
          }
          .head {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: .5em 1em;
            background: rgba(0, 0, 0, .5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            h2 {
              font-size: 24px;
              color: #fff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            em {
              color: #eed60c;
              white-space: nowrap;
              font-size: 18px;
              font-style: normal;
            }
          }

        }
        .application {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          line-height: normal;
          margin-top: 1em;
          .address {
            font-size: 14px;
            color: #000;
            margin-right: 1em;
          }
          .go {
            border-radius: 5px;
            width: 120px;
            background: #0061ae;
            line-height: 35px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
          }
        }
      }
    }
  }
</style>
<template>
  <div id="global-search">
    <Navigator></Navigator>
    <div class="search">
      <GlobalSearchInput></GlobalSearchInput>
    </div>

    <div class="searchList">

      <div class="tab">
        <router-link :to="{ name: 'Search', params:{ content: searchKeyword, tab: 'new' } }">新楼盘</router-link>
        <router-link :to="{ name: 'Search', params:{ content: searchKeyword, tab: 'secondary' } }">二手房</router-link>
        <router-link :to="{ name: 'Search', params:{ content: searchKeyword, tab: 'danti' } }">单体公寓</router-link>
      </div>

      <div class="content" v-if="contentList.length<1">{{spinShow ? '搜索中...' : '暂无符合条件的楼盘。'}}</div>
      <Spin size="large" fix v-if="spinShow"></Spin>
      <div class="content">
        <div class="item" v-for="item in contentList">
          <router-link class="link" :to="{name: categoryMap[item.category], params:{ id: item.houseNumber}}">
            <img :src="item.coverPic" alt="">
            <div class="head">
              <h2 v-text="item.name"></h2>
              <em>{{item.unitPrice}}元/m²</em>
            </div>
          </router-link>
          <div class="application">
            <span class="address" v-text="item.houseAddress"></span>
            <a href="javascript:void(0)" v-appointment="`${item.id},${item.category}`" class="go">立即预约</a>
          </div>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import api from '@/service/api'
  import store from '@/store/global'

  export default {
    store,
    components: {
      Navigator: require('@/components/Navigator.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        keywords: '',
        params: {},
        spinShow: false,
        contentList: [],
        categoryMap: {
          'kNEW_HOUSE': 'newHouseDetail',
          'kTWO_HOUSE': 'SecondarySourceDetail',
          'kDANTI_HOUSE': 'danTiDetail'
        }
      }
    },
    methods: {
      changeFilter (params) {
        this.params = params
        this.search()
      },
      search () {
        this.spinShow = true
        this.contentList = []

        let API
        switch (this.searchTab) {
          case 'new':
            API = api.newHouseListSearch(this.searchKeyword)
            break
          case 'secondary':
            API = api.twoHouseListSearch(this.searchKeyword)
            break
          case 'danti':
            API = api.danTiHouseListSearch(this.searchKeyword)
            break
        }

        let searchTab = this.searchTab
        API.then((res) => {
          // 如果搜索结果返回时页面已经发生变化
          if (searchTab !== this.searchTab) {
            return
          }
          this.spinShow = false
          if (Array.isArray(_.get(res, 'data.content'))) {
            this.contentList = res.data.content
          }
        }).catch(() => {
          this.spinShow = false
        })
      }
    },
    computed: {
      ...Vuex.mapState(['searchKeyword', 'searchTab'])
    },
    watch: {
      searchKeyword () {
        this.search(this.searchKeyword, this.searchTab)
      },
      searchTab () {
        this.search(this.searchKeyword, this.searchTab)
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

